<!--
  * 弹幕区域组件
  * @author: Ruan Jiazhen
  * @date: 2024-04-16  16:04:47
-->
<template>
  <div class="danmu-area">
    <DanmuItem
      v-for="(item, index) in danmuList"
      :key="index"
      class="danmu-item"
      :style="{ animationDelay: `${index * 0.5}s` }"
      :avatar="item.avatar"
      :content="item.content"
    />
  </div>
</template>

<script setup lang="ts">
import DanmuItem from '@/components/DanmuItem.vue';

defineProps<{
  /** 弹幕列表 */
  danmuList: {
    content:string| DanmuContent,
    avatar: string,
  }[];
}>();
</script>

<style scoped lang="scss">
.danmu-area {
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  .danmu-item{
    transform: translateX(100vw);
    animation: danmu 5s linear infinite;

    @keyframes danmu {
      0% {
        transform: translateX(100vw);
      }

      100% {
        transform: translateX(-100vw);
      }
    }
  }
}
</style>
